<template>
	<div class="city">
		<van-index-bar :index-list="Object.keys(dict())">
			<div v-for="(item,key,index) in dict()" :key="index">
				<van-index-anchor :index="key" />
				<van-cell v-for="(v,i) in item" :key='i' :title="v.name" @click="gotoings(v.name)" />
			</div>
		</van-index-bar>
	</div>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				list: [],
			};
		},
		mounted() {
			//请求数据
			this.$axios.get('/city').then((res) => {
				// 赋值
				this.list = res.cities;
				this.dict
			})
		},
		methods: {
			// 使用辅助函数,把mutations里面的方法展开到methods中
			...mapMutations(['onChangeCity']),
			gotoings(name) {
				// 调用修改地区函数
				this.onChangeCity(name);
				//回退至上一页
				this.$router.go(-1);
			},
			dict() {
				//  从list数据按照 pingyin 字段分类 (按照首字母)
				//  结果: 

				/*
				  {
				    'A':[{},{}],
				    'B':[{},{}],
				    ...
				  }
				*/
				var data = this.list;
				var field = "pinyin";

				var letter_reg = /^[A-Z]$/;
				var list = new Array();
				for (var i = 0; i < data.length; i++) {
					// 添加 # 分组，用来 存放 首字母不能 转为 大写英文的 数据
					list["#"] = new Array();
					// 首字母 转 大写英文
					var letter = data[i][field].substr(0, 1).toUpperCase();
					// 是否 大写 英文 字母
					if (!letter_reg.test(letter)) {
						letter = "#";
					}
					// 创建 字母 分组
					if (!(letter in list)) {
						list[letter] = new Array();
					}
					// 字母 分组 添加 数据
					list[letter].push(data[i]);
				}
				// 转换 格式 进行 排序；
				var resault = new Array();
				for (var key in list) {
					resault.push({
						letter: key,
						list: list[key],
					});
				}
				resault.sort(function(x, y) {
					return x.letter.charCodeAt(0) - y.letter.charCodeAt(0);
			 });
				// # 号分组 放最后
				var last_arr = resault[0];
				resault.splice(0, 1);
				resault.push(last_arr);

				// 转换 数据 格式
				var json_sort = {};
				for (var i = 0; i < resault.length; i++) {
					json_sort[resault[i].letter] = resault[i].list;
				}
				console.log(json_sort);
				return json_sort;
			}
		},
		computed: {}

	};
</script>

<style scoped="scoped" lang="scss">
	.city {
		text-align: left;
		background: #ececec;
	}
</style>
